<template>
  <div>
    <TableBarVue :pageSize.sync="size">
      <span class="bar-title">关联设置</span>
    </TableBarVue>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      class="table"
      v-loading="loading"
      :element-loading-text="loadingText"
    >
      <el-table-column prop="clientType" label="父类型" width="300">
      </el-table-column>
      <el-table-column prop="superType" label="客户类型名称" width="300">
      </el-table-column>
      <el-table-column prop="priceSys" label="选择价格体系">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.priceSys"
            placeholder="请选择"
            @change="saveEdit(scope.row)"
          >
            <el-option
              v-for="(item, index) in selectOption"
              :key="index"
              :label="item.priceName"
              :value="item.priceName"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <div class="btn">
      <el-button type="primary" @click="edit">确定</el-button>
    </div>
  </div>
</template>

<script>
import TableBarVue from "@/components/tablebar/TableBar.vue";

import {
  getCustomerApi,
  editCustomerApi,
  getPriceCount,
} from "@/http/priceApi/customerApi";
export default {
  data() {
    return {
      tableData: [],
      selectOption: [],
      save: [],
      loading: true,
      loadingText: "",
      size: 10,
      currpage: 1,
    };
  },
  created() {
    this.init(this.currpage, this.size);
  },
  methods: {
    set(item) {
      return new Promise((res) => {
        setTimeout(() => {
          res(item);
        }, 1000);
      });
    },
    async init(offset, size) {
      Promise.all([
        await getCustomerApi({ offset, size }),
        await getPriceCount(),
      ])
        .then((data) => {
          data.forEach((v) => {
            if (v.data.code != 200) {
              throw new Error(v.data.msg);
            }
          });
          this.tableData = data[0].data.data;
          this.selectOption = data[1].data.data;
          this.loading = false;
        })
        .catch((e) => {
          this.$message.error(e || "初始化失败");
          this.loading = false;
        });
    },
    async edit() {
      try {
        let len = this.save.length;
        if (len == 0) {
          return this.$message.info("暂无更改");
        }
        this.loading = true;
        this.loadingText = "正在提交";
        let data = await editCustomerApi(this.save);
        if (data.data.code != 200) throw new Error();
        this.loading = false;
        this.loadingText = "";
      } catch (e) {
        console.log(e);
        this.$message.error("修改失败");
      }

      // for await (let item of this.save) {
      //   try {
      //     let data = await editCustomerApi(item);
      //     console.log(data);
      //     len--;
      //     if (data.data.code != 200) throw new Error();
      //     if (len <= 0) {
      //       this.loading = false;
      //          this.init(this.currpage,this.size);
      //       this.loadingText = "";
      //     }
      //   } catch (e) {
      //     this.loading = false;
      //     this.loadingText = "";
      //     this.$message.error("更改失败，请稍后再试");
      //     console.log(e);
      //     break;
      //   }
      // }
    },
    saveEdit(row) {
      let index = this.save.findIndex((v) => {
        return v.id == row.id;
      });
      let obj = {
        id: row.id,
        clientType: row.clientType,
        superType: row.superType,
        priceSys: row.priceSys,
      };
      if (index != -1) {
        return this.$set(this.save, index, obj);
      }
      this.save.push(obj);
    },
  },
  components: {
    TableBarVue,
  },
  watch: [],
};
</script>

<style lang="scss" scoped>
@import "@/assets/sass/pagination/page.scss";
.btn {
  width: 30px;
  text-align: center;
  margin: auto;
  margin-top: 80px;
}
.table ::v-deep td {
  text-align: center;
}
</style>